import router from '@/router'
import store from '@/store'

router.beforeEach(async(to, from, next) => {
  const url = to.path
  const token = store.getters.token
  const whiteList = ['/login', '/404', '/test']

  // 1. 有登陆+去登录页 = 首页
  if (token && url === '/login') {
    next('/')
  }

  // 2. 有登陆+不去登录页 = 放行
  if (token && url !== '/login') {
    // 这里是一般后台页面走的逻辑分支
    // 如果在这发送用户数据请求,可以保证
    // 每个页面都一定能够得到用户数据
    // 不过这里不能单独判断对象, 需要判断里面的值
    // 否则 {} 空对象在判断时永远转换为 true
    if (!store.getters.name) {
      // 刷新进入页面时,没有数据,应该获取
      // 但是如果已经在页面里面, 在进行跳转
      // 因为之前数据已经那个, 就不需要再拿
      await store.dispatch('user/getUserInfo')
      // 这一刻拿完了用户数据, 又还没有进入页面, 就可以进行权限数据的筛选
      // 由于权限数据需要共用, 所以封装到 vuex 当中
      const res = await store.dispatch('permission/filterRoutes', store.getters.menus)
      // 追加路由访问(菜单还没恢复, 另外刷新也会404, 后面在处理)
      router.addRoutes([
        ...res,
        // 这些路由都匹配不上了再转向 404
        { path: '*', redirect: '/404', hidden: true }
      ])
      // 添加了新路由, 记得重新跳转一遍目的地址
      // 以便重新匹配对应的页面组件, 避免空白页面
      next(to.path)
      return
    }
    next()
  }

  // 3. 没登录+在白名单 = 放行
  if (!token && whiteList.includes(url)) {
    next()
  }
  // 4. 没登录+不在白名单 = 登录页
  if (!token && !whiteList.includes(url)) {
    next('/login')
  }
})
